import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import { Route } from 'react-router-dom'
// 可以借助组件三种渲染方式中的一种,children 函数形式
// 特点: children 组件函数渲染 当没有Switch组件包裹该Route 组件的时候,
// 无论 path 是否匹配, 都会渲染 children 属对应的组件
// 当页面路径匹配 Route 上的path路径时, 当前props 上的match 是对象不是null, 否则就是null
{/* <Route path='url' children={(props) => {
    return <组件名 {...props}></组件名>
}}></Route> */}

class MyNav extends Component {
    render() {
        console.log('MyNav-this', this);
        const url = this.props.to // 跳转的地址
        const text = this.props.children // 插槽
        const Tag = this.props.tag ? this.props.tag : 'a';
        const style = { display: 'inline-block' }
        return <>
            <Route path={url} children={
                (props) => {
                    if (props.match) {
                        // 说明当前页面的地址和当前的Route上的path 属性一致
                        style.background = 'red'
                    }
                    return (
                        <Tag style={style} onClick={() => this.gotoopageFn(url)}>{text}</Tag>
                    )
                }
            }></Route>
        </>


        // return <Tag onClick={() => this.gotoopageFn(url)}>{text}</Tag>
    };
    // 定义事件
    gotoopageFn(url) {
        console.log('url', url);
        // 使用编程式导航
        console.log('mynav-this', this);
        this.props.history.push(url)
    }

}
export default withRouter(MyNav) 